'use strict';
var React = require('react');

//分模块使用坑爹的ie8无法支持，只能如此
var echarts=require('echarts');

/*// 引入 ECharts 主模块
 var echarts = require('echarts/lib/echarts');
 // 引入柱状图
 require('echarts/lib/chart/map');
 // 引入提示框，标题，图例组件
 require('echarts/lib/component/tooltip');

 require('echarts/lib/component/legend');*/




//引入地图
/*require('../../library/china.js');*/



class HkfsMap extends React.Component {
    constructor(props) {
        super(props);
    }

    //渲染完成之后渲染出地图
    componentDidMount() {
        if (this.props.width !== undefined) {
            this.refs.HkfsMap.style.width = this.props.width;
        }
        if (this.props.height !== undefined) {
            this.refs.HkfsMap.style.height = this.props.height;
        }
        var visualDom=this;
        /*var myChart = echarts.init(this.refs.HkfsMap);*/
        reqwest({
            url: '/api/getMapMainData',
            type: 'json'
        })
            .then(function (chinaJson) {
                echarts.registerMap('china', chinaJson);
                var myChart = echarts.init(visualDom.refs.HkfsMap);
                var

                    option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params, ticket, callback) {
                                reqwest({
                                    url: '/api/getMapData?target='+encodeURIComponent(params.name),
                                    type: 'json'
                                }).then(function (data) {
                                    callback(ticket, (data));
                                });

                                return "玩命加载中...";
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 1,
                            left: 'left',
                            show: false,
                            top: 'bottom',
                            text: ['高', '低'],           // 文本，默认为数值文本
                            calculable: true,
                            color: ['#8bc0e8', '#d7e1e8']

                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            show: false,
                            data: [{
                                name: '分公司分布'
                            }]
                        },

                        series: [
                            {
                                name: '分公司分布',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle: {
                                    normal: {
                                        areaColor: '#d7e1e8',
                                        color: '#f25c5c',
                                        borderColor: 'white'
                                    },
                                    emphasis: {
                                        areaColor: '#f25c5c',
                                        color: 'black'
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                data: [
                                    {name: '重庆', value: 1},
                                    {name: '重庆', value: 2},
                                    {name: '上海', value: 3},
                                    {name: '北京', value: 4},
                                    {name: '广东', value: 5},
                                    {name: '广东', value: 6},
                                    {name: '湖北', value: 7},
                                    {name: '江苏', value: 8},
                                    {name: '辽宁', value: 9},
                                    {name: '四川', value: 10},
                                    {name: '湖南', value: 11},
                                    {name: '河南', value: 12},
                                    {name: '河北', value: 13},
                                    {name: '福建', value: 14},
                                    {name: '安徽', value: 15},
                                    {name: '山东', value: 16}
                                ]
                            }
                        ]
                    };
                myChart.setOption(option);
            });

    }

    render() {
        return (
            <div className="HkfsMap" ref="HkfsMap">
            </div>
        )
    }
}

HkfsMap.propTypes = {
    width: React.PropTypes.string,
    height: React.PropTypes.string
};

HkfsMap.defaultProps = {
    width: '100%',
    height: '500px'
};

module.exports = HkfsMap;